<template>
	<view class="page-opinion">
		<view class="condition">
			<view class="content">
				<textarea class="textarea" :placeholder="$t('baseCommon.message.pleaseEnter', { title: $t('baseCommon.other.approvalOpinion') })" auto-height v-model="opinion"/>
			</view>
		</view>
		<view class="button-popup">
			<button type="primary" @click="submit">{{$t('baseCommon.buttons.confirm')}}</button>
			<button type="default" @click="reset">{{$t('baseCommon.buttons.clear')}}</button>
		</view>
	</view>
</template>

<script>
	import { notice } from '@/utils/common.js'
	
	export default {
		props: {
			type: {
				type: String
			}
		},
		data() {
			return {
				opinion: ''
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			init() {
				if(this.type == "endProcess" || this.type == "oppose") {
					this.opinion = this.$t('baseCommon.buttons.noAgree')
				} else {
					this.opinion = this.$t('common.buttons.agree')
				}
			},
			submit() {
				if(!this.opinion){
					notice.toast(this.$t('baseCommon.message.pleaseEnter', { title: this.$t('baseCommon.other.approvalOpinion') }))
					return
				}
				
				this.$emit("handleFlow", this.opinion);
			},
			reset() {
				this.opinion = ""
			}
		}
	}
</script>

<style lang="scss">
	@import '@/static/style/common-detail.scss';
	
	.page-opinion {
		overflow-y: auto;
		background-color: #fff;
		width: 350px;
	}
	
	.content {
		margin: 10px;
		border: 1px solid #E6E6E6;
	}
	
	.textarea {
		min-height: 100px;
		margin: 5px;
	}
</style>
